<!-- 
    @author: wyx
    @date: 2022-11-23
    @description: 中标预测
-->

<template>
    <div class="bidding-forecast content">
        <div class="back">
            <el-link type="info" :underline="false" @click="back"><i class="el-icon-arrow-left"></i>{{`返回`}}</el-link>
        </div>
 
        <div class="top-img">
            <img src="~@images/bidding-forecast/bitmap.png" alt="">
        </div>

        <div class="bottom">
            <div class="label">
                潜在商机推送信息查看<span style="color:red;font-size:16px;"> 0 </span>条
            </div>

            <div class="search">

                <el-input></el-input>
                <div class="btn">
                    搜索
                </div>
            
            </div>

            <div class="main-content">
                <div class="not-empty">

                </div>

                <div class="empty">
                    <div>
                        <p>输入需要预测的项目名称，查看中标预测概率！</p>
                        <p>无中标预测次数，请先<span class="buy">去够买</span></p>
                    </div>
                </div>


            </div>
        </div>

    </div>
</template>

<script>



export default {
    layout: 'client',
    head: {},
    components: {


    },
    async asyncData(context) {},
    data() {
        return {

        };
    },
    computed: {

    },
    methods: {
        back() {
            this.$router.go(-1);
        },

    },
    created() {},
    mounted() {

    },
    watch: {},
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';
.bidding-forecast {
    .back {
        height: 36px;
        line-height: 36px;
    }
    .top-img{
        animation: top  0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
    }

    .bottom{
        animation: bottom  0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
        background: white;
        padding: 20px;
        margin-top: 20px;

        .search{
            margin: 30px 0 0 0;
            display: flex;
            align-items: center;
            justify-content: center;
            .el-input{
                width:664px;
                height: 40px;
            }
            ::v-deep .el-input__inner{
                border-radius: 0px;
                border: 1px solid $primaryColor;
                background: #eff3ff;
            }

            .btn{
                cursor: pointer;
                width: 72px;
                height: 40px;
                line-height: 40px;
                margin-left: -1px;
                text-align: center;
                color: white;
                background: $primaryColor;
                transition: all 0.5s;
            }

            .btn:hover{
                background: $primaryColor8;
            }
        }

        .main-content{
            display: flex;
            min-height: 360px;

            .empty{
                min-height: 100%;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                line-height: 2em;

                .buy{
                    cursor: pointer;
                    color: $primaryColor;
                }
     
            }
        }

    }


    @keyframes top {
        0% {
            transform: translateY(-50px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    } 

    @keyframes bottom {
        0% {
            transform: translateY(50px);
            opacity: 0;
        }
        100% {
            transform: translateY(0);
            opacity: 1;
        }
    } 

}
</style>
